<template>
  <div class="container">
    <div class="top-box">
      <div class="left-box">
        <div class="color-box">车辆详情</div>
      </div>
      <div class="right-box">
        <el-button type="info" icon="el-icon-back" class="btn_fanhui" @click="Return">返回</el-button>
      </div>
    </div>
    <div class="content-box">
      <div class="title-box">基本信息</div>
      <br />
      <p class="Purchase_Division"></p>
      <div class="header-box">
        <el-form :model="item" :inline="true" class="demo-form-inline">
          <el-form-item label="车牌号">
            <el-input :disabled="true" v-model="item.carNumber"></el-input>
          </el-form-item>
          <el-form-item label="颜色">
            <el-input :disabled="true" v-model="item.carColor"></el-input>
          </el-form-item>
          <el-form-item label="品牌">
            <el-input :disabled="true" v-model="item.carBrand"></el-input>
          </el-form-item>
          <el-form-item label="型号">
            <el-input :disabled="true" v-model="item.carType"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-input :disabled="true" v-model="item.state"></el-input>
          </el-form-item>
          <el-form-item label="公里数">
            <el-input :disabled="true" v-model="item.thisLong"></el-input>
          </el-form-item>
          <el-form-item label="保险时间">
            <el-input :disabled="true" v-model="item.insuranceDate"></el-input>
          </el-form-item>
          <el-form-item label="年检日期">
            <el-input :disabled="true" v-model="item.yearlyDate"></el-input>
          </el-form-item>
          <el-form-item label="报废日期">
            <el-input :disabled="true" v-model="item.scrapDate"></el-input>
          </el-form-item>
          <el-form-item label="提前提醒">
            <el-input :disabled="true" v-model="item.earlyWarning"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <!-- ========================================================= -->
      <!-- ===============使用记录============== -->
      <!-- ========================================================= -->
    </div>
    <div class="des-box">
      <div class="title-box">使用记录</div>
      <br />
      <p class="Purchase_Division"></p>
      <br />
      <el-table
        :data="tableData"
        style="width: 100%;background-color:#fff"
        :max-height="400"
        stripe
      >
        <el-table-column fixed prop="createOnStr" label="申请日期" align="center"></el-table-column>
        <el-table-column prop="creater" label="申请人" align="center" width="100"></el-table-column>
        <el-table-column prop="useTime" label="用车时间" align="center"></el-table-column>
        <el-table-column prop="state" label="状态" align="center"></el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="180">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="warning"
              v-if="scope.row.paixu==1&&shows==0"
              @click="shenhe(scope.row.id,scope.row.type,0)"
            >审核</el-button>
            <el-button
              size="small"
              type="warning"
              v-if="scope.row.paixu==2&&shows==0"
              @click="shenhe(scope.row.id,scope.row.type,0)"
            >确认</el-button>
            <el-button size="small" type="primary" @click="shenhe(scope.row.id,scope.row.type,1)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <template>
        <el-pagination
          style="text-align: center;"
          background
          layout="prev, pager, next"
          :current-page="current"
          :page-size="pagesize"
          @current-change="handleCurrentChange"
          :total="total"
        ></el-pagination>
      </template>
    </div>
    <!-- ========================================================= -->
    <!-- ===============维保记录============== -->
    <!-- ========================================================= -->
    <div class="desd-box">
      <div class="title-box">维保记录</div>
      <br />
      <p class="Purchase_Division"></p>
      <br />
      <el-table :data="tableData1" :max-height="400" style="width:98%; margin-left: 10px;">
        <el-table-column label="维修日期" align="center">
          <template slot-scope="scope">
            <div class="block">
              <el-date-picker
                v-model="scope.row.maintdate"
                type="date"
                placeholder="选择日期"
                style="width:80%;"
              ></el-date-picker>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="维修类别" align="center">
          <template slot-scope="scope">
            <el-select v-model="scope.row.maintdetil"></el-select>
          </template>
        </el-table-column>
        <el-table-column prop="province" label="维修内容" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.type"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="city" label="维修凭证" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.matpic2" alt />
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data () {
    return {
      //文本框
      formInlineBa: {},
      //下拉
      options: [],
      value: "",
      options1: [],
      value1: "",
      //列表List
      tableData: [],
      id: 0,
      shows: 1,
      item: { carNumber: "", carColor: "", carBrand: "", carType: "", insuranceDate: "", yearlyDate: "", buyTime: "", scrapDate: "", thisLong: "", earlyWarning: "" },
      total: 1,
      current: 1,
      pagesize: 5,
    };
  },
  created () {
    this.id = this.$route.query.e;
    this.shows = this.$route.query.shows;
    this.getlist(0);
  },
  methods: {
    add () {
      this.dialogVisible2 = true;
    },
    Return () {
      window.history.go(-1);
    },
    addlist () {
      var obj = {
        id: 2,
        licensenum: this.licensenum,
        date: this.date,
        type: this.type,
        content: this.content,
        kilopic: "",
        repairpic: this.imageUrl3s,
        kilometre: ""
      };
      var objs = JSON.stringify(obj);
      axios(
        "/apis/AdministrativeManagement.asmx/Vehmanage?index=2&jsondata=" + objs
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        if (datas.string.__text == "添加维修记录成功") {
          this.$message.success("添加成功");
          this.dialogVisible2 = false;
          this.getlist();
        } else {
          this.$message.error(datas.string.__text);
        }
      });
    },
    getlist (page) {
      let obj = {
        id: this.id,
        pn: page,
        PerPageSize: this.pagesize
      };
      var objs = JSON.stringify(obj);
      let the = { index: 8, jsondata: objs }
      axios.post("/apis/AdministrationManage.asmx/GetData", the).then(({ data }) => {
        var list = eval('(' + data.d + ')');
        console.log(list);
        this.item = list.item;
        this.total = list.count;
        this.tableData = list.data;
      });
    },
    shenhe (e, type, shows) {
      this.$router.push({
        path: "./VehicleManagementcarxiangqTwo",
        query: { e: e, type: type, shows: shows }
      });
    },
  }
};
</script>
<style lang="scss" scoped>
@import '@/assets/scss/base.scss';
.content-box {
  width: 98%;
  height: 40%;
  background-color: white;
  border-radius: 2px;
  margin: 0px auto;
  margin-top: 40px;
}
.title-box {
  margin-left: 25px;
  padding-top: 10px;
}
.Purchase_Division {
  width: 98%;
  margin-left: 1%;
  border: 0.5px solid $linecolor;
}
.header-box {
  width: 98%;
  margin: 30px auto;
}

//标题
.color-box {
  margin-top: 20px;
  margin-left: 20px;
}
.right-box {
  float: right;
  margin-right: 30px;
  margin-top: -20px;
}
//使用记录
.des-box {
  float: left;
  margin-top: 10px;
  width: 48%;
  margin-left: 15px;
  height: 500px;
  background-color: white;
  border-radius: 8px;
}
//维保记录
.desd-box {
  float: right;
  margin-top: 10px;
  width: 49%;
  margin-right: 20px;
  height: 500px;
  background-color: white;
  border-radius: 8px;
}
</style>